본문으로 건너뛰기

var, let, const

🧑🏻‍💻 var, let, const​

✅ 각 키워드 사용 시기​

✏️ var 사용 시기​

  • ES6 이전의 JavaScript 코드나 브라우저 호환성을 고려해야 할 때 사용할 수 있다.

✏️ let 사용 시기​

  • 재할당이 필요한 경우에 사용한다.

✏️ const 사용 시기​

  • 변수에 할당한 값을 변경할 수 없기 때문에, 상수 값 또는 객체 불변성을 보장하기 위한 불변 변수(immutable variable)를 선언할 때 주로 사용한다.
varletconst
스코프함수 레벨 스코프블록 레벨 스코프블록 레벨 스코프
변수 호이스팅OO, but 참조에러O, but 참조에러

✅ 함수 레벨 스코프​

  • 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

✅ 블록 레벨 스코프​

  • 모든 코드 불록 (함수, if 문, for 문, while 문, try/catch 문 등)을 지역 스코프로 인정한다.

✅ 변수 호이스팅​

✏️ var​

  • 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다.

  • 런타임 이전에 JS 엔진에 의해 암묵적으로 “선언 단계”와 “초기화 단계”가 한번에 진행된다.

  • “선언 단계”에서 실행 컨텍스트의 렉시컬 환경(스코프)에 변수 식별자를 등록해 JS 엔진에 변수의 존재를 알린다.

  • “초기화 단계”에서 undefined로 변수를 초기화한다.

  • 따라서 var 변수는 변수 선언문 이전에 undefined 값으로 참조할 수 있다.

✏️ let, const​

  • 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

  • 런타임 이전에 JS 엔진에 의해 암묵적으로 “선언 단계”만 진행된다.

  • “초기화 단계”는 변수 선언문에 도달했을 때 실행된다.

  • 따라서 let 변수를 변수 선언문 이전에 참조하면 참조 에러가 발생한다.

  • 이처럼 스코프 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 (Temporal Dead Zone)라고 부른다.

let foo = 1;

{
    console.log(foo);  // 참조 에러
    let foo = 2;
}

cf.
let, const, class, var, function, function* 등 모든 선언을 호이스팅한다. 단 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것 처럼 동작한다.

✅ 전역 변수​

  • var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티이다.

  • let 키워드로 선언한 전역 변수는 개념적인 블록 (전역 렉시컬 환경의 선언적 환경 레코드) 내에 존재한다.

🧑🏻‍💻 const​

✅ 선언과 초기화​

  • const 변수는 반드시 선언과 동시에 초기화해야 한다.

✅ 재할당 금지​

  • const 변수에 원시 값을 할당할 경우 값을 변경할 수 없다. 하지만 const 변수에 객체를 할당할 경우 새로운 값을 재할당 하는 것은 불가능하지만 프로퍼티 동적 생성, 삭제, 프로퍼티 값의 변경을 통해 객체를 변경하는 것은 가능하다.

참고 자료

  • 모던 자바스크립트 Deep Dive (사진 출처)